<template>
	<!--index.wxml-->
	<view>
		<!-- 头部 -->
		<view class="header">
			<view class="left">
				<image class="saomiao" src="../../static/image/ai3.png" mode=""></image>
			</view>
			<view class="middle">
				<image class="sousuo" src="../../static/image/ath.png" mode=""></image>
				<input class="input" type="text" placeholder="搜索商品" />
			</view>
			<view class="right">
				<image  class="sixin" src="../../static/image/ahv.png" mode=""></image>
			</view>
		</view>

		<!-- 轮播 -->
		<view class="lbt">
			<!-- autoplay自动轮播
		                  interval修改轮播时间
		                  circular衔接轮播
		                  indicator-dots显示指示器分页器索引器
		                  indicator-color指示器的未选择的颜色
		                  indicator-active-color选中的时候的指示器的颜色 -->
			<swiper class="swiper" autoplay="true" interval="1000" circular="true" indicator-dots="true"
				indicator-color="#b48680" indicator-active-color="#ffffff">
				<swiper-item>
					<image src="../../static/image/jd1.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/image/jd2.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/image/jd3.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/image/jd4.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/image/jd5.jpg"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 礼品券 -->
		<view class="lpq">
			<view class="lpqbox">
				<!-- 图片 -->
				<image class="" src="../../static/image/logo1.png" />
				<!-- 文字 -->
				<text class="">京东超市</text>
			</view>
			<view class="lpqbox">
				<image class="" src="../../static/image/logo2.png" />
				<text class="">全球购</text>
			</view>
			<view class="lpqbox">
				<image class="" src="../../static/image/logo3.png" />
				<text class="">服装城</text>
			</view>
			<view class="lpqbox">
				<image class="" src="../../static/image/logo4.png" />
				<text class="">京东生鲜</text>
			</view>
			<view class="lpqbox">
				<image class="" src="../../static/image/logo5.png" />
				<text class="">京东到家</text>
			</view>
			<view class="lpqbox">
				<image class="" src="../../static/image/logo6.png" />
				<text class="">充值中心</text>
			</view>
			<view class="lpqbox">
				<image class="" src="../../static/image/logo7.png" />
				<text class="">京东金融</text>
			</view>
			<view class="lpqbox">
				<image class="" src="../../static/image/logo8.png" />
				<text class="">物流查询</text>
			</view>
			<view class="lpqbox">
				<image class="" src="../../static/image/logo9.png" />
				<text class="">领券</text>
			</view>
			<view class="lpqbox">
				<image class="" src="../../static/image/logo10.png" />
				<text class="">我的关注</text>
			</view>
		</view>


		<!-- 掌上秒杀 -->
		<view class="zsms">
			<view class="zsmsbox1">
				<!-- 掌上秒杀图片 -->
				<image src="../../static/image/bej.png"></image>
				<!-- 更多秒杀 -->
				<text>更多秒杀></text>
			</view>
			<view class="zsmsbox2">
				<scroll-view class="zsmss-scroll-view" scroll-x="true">
					<view class="zsmss-scroll-view-view">
						<view class="scroll-view-image">
							<image src="../../static/image/quick1.jpg"></image>
							<text>125￥</text>
						</view>
					</view>
					<view class="zsmss-scroll-view-view">
						<view class="scroll-view-image">
							<image src="../../static/image/quick2.jpg"></image>
							<text>125￥</text>
						</view>
					</view>
					<view class="zsmss-scroll-view-view">
						<view class="scroll-view-image">
							<image src="../../static/image/quick3.jpg"></image>
							<text>125￥</text>
						</view>
					</view>
					<view class="zsmss-scroll-view-view">
						<view class="scroll-view-image">
							<image src="../../static/image/quick4.jpg"></image>
							<text>125￥</text>
						</view>
					</view>
					<view class="zsmss-scroll-view-view">
						<view class="scroll-view-image">
							<image src="../../static/image/quick5.jpg"></image>
							<text>125￥</text>
						</view>
					</view>
					<view class="zsmss-scroll-view-view">
						<view class="scroll-view-image">
							<image src="../../static/image/quick6.jpg"></image>
							<text>125￥</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 超级品类日 -->
		<view class="cjplr">
			<view class="cjplrbox">
				<image src="../../static/image/ad-0.jpg"></image>
			</view>
			<view class="cjplrbox">
				<image src="../../static/image/ad-big.jpg"></image>
			</view>
			<view class="cjplrbox">
				<image src="../../static/image/ad-1.jpg"></image>
			</view>
		</view>

		<!-- 底部左右 -->
		<view class="dibu">
			<view class="dibubox">
				<image src="../../static/image/ad-right.jpg"></image>
			</view>
			<view class="dibubox">
				<image src="../../static/image/ad-left.jpg"></image>
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
// 头部
.header {
    display: flex;
    justify-content: space-between;
}
.saomiao{
	height: 40rpx;
	width: 40rpx;
}
.sixin{
	height: 40rpx;
	width: 40rpx;
}

.left {
    width: 5%;
    height: 40rpx;
}

.middle {
    width: 86%;
    height: 50rpx;
    position: relative;
    background-color: #f8f7f7;
}

.sousuo {
    height: 40rpx;
    width: 40rpx;
    position: absolute;
    margin-left: 20rpx;
}

.input {
    width: 84%;
    height: 50rpx;
    position: absolute;
    margin-left: 30rpx;
    padding-left: 60rpx;
}

.right {
    width: 5%;
    height: 40rpx;
}

/* 轮播图 */
.lbt {
    width: 100%;
    height: 400rpx;
    margin-top: 20rpx;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper swiper-item image {
    width: 100%;
    height: 100%;
}

/* 礼品券 */
.lpq {
    width: 100%;
    height: 360rpx;
    background-color: #f8f7f7;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 20rpx;
    padding-top: 20rpx;
}

.lpqbox {
    width: 20%;
    height: 160rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    box-sizing: border-box;
    text-align: center;
}

.lpqbox image {
    width: 100rpx;
    height: 100rpx;
    padding-left: 17%;
}

.lpqbox text {
    color: #c2bcc3;
    font-size: 25rpx;
}

/* 掌上秒杀 */
.zsms {
    margin-top: 20rpx;
    width: 100%;
    height: 400rpx;
}

.zsmsbox1 {
    width: 100%;
    height: 60rpx;
    display: flex;
    justify-content: space-between;
}

.zsmsbox1 image {
    width: 250rpx;
    height: 60rpx;
}

.zsmsbox1 text {
    font-size: 30rpx;
    color: #c1c1c1;
    line-height: 60rpx;
}

.zsmsbox2 {
    width: 100%;
    height: 340rpx;
}

.zsmss-scroll-view {
    width: 100%;
    height: 100%;
    /* 父元素不换行 */
    white-space: nowrap;
}

.zsmss-scroll-view-view {
    /* 设置子元素 */
    display: inline-block;
}

/* 子元素里面的盒子 */
.scroll-view-image {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.scroll-view-image image {
    width: 250rpx;
    height: 250rpx;
}

.scroll-view-image text {
    font-size: 30rpx;
    color: red;
}

/* 超级品类日 */
.cjplr {
    width: 100%;
    height: 350rpx;
    background-color: rgb(143, 64, 64);
    display: flex;
}

.cjplr .cjplrbox {
    width: 33.3%;
    height: 350rpx;
}

.cjplr .cjplrbox image {
    width: 100%;
    height: 100%;
}

/* 底部 */
.dibu {
    width: 100%;
    height: 350rpx;
    display: flex;
}

.dibubox {
    height: 350rpx;
    width: 50%;
}

.dibubox image {
    width: 100%;
    height: 350rpx;
}
</style>
